<template>
  <view class="wrap">
    <global-toast></global-toast>
    <view class="simplify-bg">
      <view class="bg-after"></view>
    </view>
    <view class="simplify-bg bottom">
      <view class="bg-after"></view>
    </view>
    <view class="top"></view>
    <!-- <view class="pr-40rpx pl-35rpx pt-60rpx">
      <u-icon name="arrow-left" size="25" @click="returnToThePreviousLayer"></u-icon>
    </view> -->
    <view class="content">
      <view class="logo">
        <img src="/static/images/public/logo.png" />
      </view>
      <!-- <view class="title">欢迎登录</view> -->
      <view v-if="loginType == 1">
        <input
          class="input-account"
          focus
          type="txt"
          v-model="username"
          placeholder="请输入账号"
          placeholder-style="color:#bbbbbb"
          always-embed
        />
        <view class="tips">输入已注册账号进行登录</view>
        <view class="pwd-input">
          <input
            v-if="pwdshow"
            class="input-account"
            type="txt"
            v-model="password"
            placeholder="请输入密码"
            placeholder-style="color:#bbbbbb"
            always-embed
          />
          <input
            v-else
            class="input-account"
            type="password"
            v-model="password"
            placeholder="请输入密码"
            placeholder-style="color:#bbbbbb"
            always-embed
          />
          <u-icon :name="!pwdshow ? 'eye-fill' : 'eye-off'" size="23" @click="pwdshow = !pwdshow"></u-icon>
        </view>
        <view class="tips"></view>
      </view>
      <view v-else-if="loginType == 2">
        <input
          class="input-phone"
          focus
          type="number"
          v-model="tel"
          placeholder="请输入手机号"
          placeholder-style="color:#bbbbbb"
        />
        <view class="tips">输入已注册账户的手机号进行登录</view>
      </view>
      <button @tap="submit" :class="['getCaptcha', isInputStyle ? 'getButtonColor1' : 'getButtonColor2']">
        {{ submitName }}
      </button>
      <view class="alternative">
        <view class="password" @click="loginForPwd">{{ loginForPwdName }}</view>
        <!-- <view class="issue" @click="issue">遇到问题</view> -->
        <view class="issue" @click="register">新用户注册</view>
      </view>
    </view>
    <view class="buttom">
      <view class="loginType">
        <!-- 根据项目对接情况显隐 -->
        <!-- <view class="wechat item" @click="loginForWX">
          <view class="icon"><u-icon size="80rpx" name="weixin-fill" color="rgb(83,194,64)"></u-icon></view>
          微信
        </view>
        <view class="QQ item" @click="loginForQQ">
          <view class="icon"><u-icon size="80rpx" name="qq-fill" color="rgb(17,183,233)"></u-icon></view>
          QQ
        </view> -->
        <!-- <view class="zhifubao item" @click="loginForZFB">
          <view class="icon"><u-icon size="80rpx" name="zhifubao" color="#0078d4"></u-icon></view>
          支付宝
        </view> -->
      </view>
      <view class="hint">
        <checkbox-group @change="changecheckbox">
          <checkbox value="cb" style="transform: scale(0.7)" color="var(--kui-color-theme)" :checked="checkbox" />
        </checkbox-group>
        <view>
          阅读并同意
          <text class="link" v-for="item in privacyPolicyList" @click="agreement(item.url)">《{{ item.name }}》</text>
          并授权使用您的账号信息（如昵称、头像、收获地址）以便您统一管理
        </view>
      </view>
    </view>
    <u-popup :show="isTerm" @close="isTerm = false" mode="bottom" :round="10" closeable>
      <view class="popup-content">
        <view class="popup-title">请阅读并同意以下条款</view>
        <view class="popup-links">
          <text class="privacyPolicy" v-for="item in privacyPolicyList" @click="agreement(item.url)">
            《{{ item.name }}》
          </text>
        </view>
        <view class="popup-footer">
          <u-button @click="agreeAndContinue" shape="circle" color="var(--kui-color-theme)">同意并继续</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
// 定义唯一的事件标识（注意不要和其他页面重复）
const eventName = "message-check-login";
export default {
  data() {
    return {
      tel: "",
      loginType: 1, // 1.密码登录，2.短信登录
      username: "",
      password: "",
      pwdshow: false,
      checkbox: false,
      isShaking: false,
      isTerm: false,
      privacyPolicyList: [
        {
          name: "用户协议",
          url: "1",
        },
        {
          name: "隐私政策",
          url: "2",
        },
        {
          name: "儿童/青少年个人信息保护规则",
          url: "3",
        },
      ],
    };
  },
  computed: {
    isInputStyle() {
      let boot = false;
      if (this.loginType == 1) {
        if (this.username && this.password) {
          boot = true;
        }
      } else if (this.loginType == 2) {
        // 正则判断是手机号
        const phoneRex = /^1[3456789]\d{9}$/;
        if (this.tel && phoneRex.test(this.tel)) {
          boot = true;
        }
      }
      return boot;
    },
    submitName() {
      return this.loginType == 1 ? "登录" : "获取短信验证码";
    },
    loginForPwdName() {
      return this.loginType == 1 ? "短信登录" : "密码登录";
    },
  },
  methods: {
    returnToThePreviousLayer() {
      uni.navigateBack({ delta: 1 });
    },
    async submit() {
      if (this.loginType == 1) {
        if (!this.username) {
          uni.showToast({ title: "请输入账号", icon: "none" });
          return;
        }
        if (!this.password) {
          uni.showToast({ title: "请输入密码", icon: "none" });
          return;
        }
      } else if (this.loginType == 2) {
        if (!this.tel) {
          uni.showToast({ title: "请输入手机号", icon: "none" });
          return;
        }
      }
      if (!this.checkbox) {
        this.isTerm = true;
        return;
      }
      if (this.loginType == 1) {
        try {
          uni.showLoading({ title: "登录中..." });
          const payload = { username: this.username, password: this.password };
          await this.$store.dispatch("user/login", payload);
          uni.hideLoading();
        } catch (error) {
          uni.hideLoading();
          console.error(error);
        }
      } else if (this.loginType == 2) {
        // 判断手机号格式
        if (this.$u.test.mobile(this.tel)) {
          // 交给其他页面做交互，回调的处理逻辑通过监听事件处理
          uni.navigateTo({
            url: "./code?eventName=" + eventName + "&tel=" + this.tel,
          });
        } else {
          uni.showToast({ title: "请输入正确的手机号", icon: "none" });
        }
      }
    },
    // 密码登录
    loginForPwd() {
      if (this.loginType == 1) {
        this.loginType = 2;
      } else {
        this.loginType = 1;
      }
    },
    // 遇到问题
    issue() {
      uni.navigateTo({ url: "/pages/subFeeback/feedbackIndex/feedbackIndex" });
    },
    // 三方登录
    loginForZFB() {},
    loginForWX() {},
    loginForQQ() {},
    // 阅读协议
    changecheckbox() {
      this.checkbox = !this.checkbox;
    },
    // 协议与隐私
    agreement(type) {
      uni.navigateTo({
        url: "/pages/subHome/public/agreement/agreement?type=" + type,
      });
    },
    // 同意并继续
    agreeAndContinue() {
      this.isTerm = false;
      this.checkbox = true;
      this.submit();
    },
    // 新用户注册
    register() {
      uni.navigateTo({
        url: "./register?eventName=" + eventName,
      });
    },
  },
  onLoad() {
    const { account } = this.$store.getters.loginInfo;
    // 自动填充账号
    if (account) {
      this.username = account;
    }
    // 监听事件
    uni.$on(eventName, (result) => {
      console.log("message-check : ", result);
      // uni.showLoading({ title: "正在验证" });
      // const timer = setTimeout(() => {
      //   clearTimeout(timer);
      // }, 3000);
    });
  },
  onUnload() {
    // 销毁监听事件
    uni.$off(eventName);
    uni.hideLoading();
    console.log("页面销毁");
  },
};
</script>
<style lang="scss" scoped>
page {
  background: white !important;
}
.wrap {
  height: 100%;
  font-size: 28rpx;
  padding: 20rpx 0;

  .content {
    z-index: 1;
    position: relative;
    width: 600rpx;
    margin: 50rpx auto 0;

    .title {
      text-align: left;
      font-size: 50rpx;
      font-weight: 500;
      margin-bottom: 100rpx;
    }

    .input-phone {
      font-weight: bold;
      color: var(--kui-color-theme);
      // background-color: white;
      // padding: 20rpx 15rpx;
      // border-radius: 10rpx;
    }

    input {
      text-align: left;
      margin-bottom: 10rpx;
      padding-bottom: 6rpx;
      position: relative;
      font-size: 38rpx;
    }

    .tips {
      color: #d4d4d4;
      margin-bottom: 60rpx;
      margin-top: 8rpx;
    }

    .getCaptcha {
      color: white;
      border: none;
      font-size: 30rpx;
      padding: 12rpx 0;
      border-radius: 50rpx;

      &::after {
        border: none;
      }
    }

    .getButtonColor1 {
      background-color: $kui-color-theme;
    }
    .getButtonColor2 {
      background-color: $kui-color-theme-light;
    }

    .alternative {
      color: $uni-text-color-grey;
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
    }

    .pwd-input {
      display: flex;
      flex-direction: row;
    }

    .input-account {
      flex: auto;
      font-weight: bold;
      color: var(--kui-color-theme);
      position: relative;
      // &::before {
      //   position: absolute;
      //   bottom: 0;
      //   display: inline-flex;
      //   content: "";
      //   width: 50rpx;
      //   height: 5rpx;
      //   border-radius: 99rpx;
      //   background-color: var(--kui-color-theme);
      // }
    }
  }

  .buttom {
    // position: relative;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    .loginType {
      display: flex;
      padding: 100rpx 150rpx 50rpx 150rpx;
      justify-content: space-between;
      max-width: 600rpx;
      margin: auto;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: $uni-text-color;
        font-size: 28rpx;
      }
    }

    .hint {
      padding: 20rpx 40rpx;
      font-size: 25rpx;
      color: $uni-text-color-grey;
      text-align: center;
      margin-bottom: 40rpx;
      display: flex;
      .link {
        color: var(--kui-color-theme);
      }
    }
  }
}

.simplify-bg {
  background-image: radial-gradient($kui-color-theme, transparent 63%);
  width: 230px;
  height: 288px;
  transform: rotateZ(243deg);
  position: absolute;
  left: 0px;
  top: -120px;
  opacity: 0.8;
  filter: blur(80rpx);
  z-index: 0;
  // -webkit-backdrop-filter: blur(80rpx);
  // backdrop-filter: blur(80rpx);

  &.bottom {
    left: auto;
    top: auto;
    right: -120px;
    bottom: 50px;
    background-image: radial-gradient($kui-color-theme, transparent 33%);
  }

  .bg-after {
    width: 100%;
    height: 100%;
    background-image: radial-gradient(#0c0c0c00 2px, #ffffff 2px);
    background-size: 4px 4px;
    backdrop-filter: blur(20px);
  }
}

.logo {
  filter: brightness(1.5);
  display: flex;
  justify-content: center;
  padding: 200rpx 200rpx 100rpx 200rpx;
  img {
    width: 550rpx;
    height: 240rpx;
    margin: 0 auto;
  }
}

.popup-content {
  .popup-title {
    padding: 30rpx;
    font-size: 28rpx;
    text-align: center;
    margin-bottom: 40rpx;
    color: #333;
    border-bottom: 1px solid #f6f5f5;
  }

  .popup-links {
    padding: 0rpx 20px;
    margin-bottom: 60rpx;
    .privacyPolicy {
      color: var(--kui-color-theme);
      font-size: 32rpx;
      font-weight: 500;
    }
  }

  .popup-footer {
    padding: 0rpx 50rpx;
    margin-bottom: 50rpx;
  }
}
</style>
